<template>
    <div>
        <el-form :inline="true" :model="query" class="query-form" size="small">
            <el-form-item>
                <el-button type="primary" icon="el-icon-edit" @click.native="handleForm(null,null)">添加</el-button>
            </el-form-item>
            <el-form-item>
                <el-input v-model="query.searchText" placeholder="请输入ID或者仓库名称" clearable></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-refresh" @click="onRest"></el-button>
                <el-button type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
            </el-form-item>
        </el-form>

        <el-table
            ref="multipleTable"
            v-loading="loading"
            :data="list"
            :header-cell-style="{background:'#F4F4F5',color:'#606266'}"
            @selection-change="handleSelectionChange"
            border
        >
            <el-table-column
                label="选择"
                prop="freightid"
                type="selection"
                :show-overflow-tooltip="true"
                width="50"
                align="center"
            />
            <el-table-column label="序号" align="center" width="50" prop="freightid">
            </el-table-column>

            <el-table-column label="模板名称" align="center" width="180" prop="templatename">
            </el-table-column>
            <el-table-column label="送达" align="center" width="180" prop="scopeoftransport">
                <template slot-scope="scope">

                    <div v-if="scope.row.scopeoftransport===0">
                        全国
                    </div>
                    <div v-if="scope.row.scopeoftransport===1">
                     局部
                    </div>

                </template>

            </el-table-column>
            <el-table-column label="首件" align="center" width="180" prop="defaultnumber">
            </el-table-column>
            <el-table-column label="运费" align="center" width="180" prop="defaultmoney">
            </el-table-column>
            <el-table-column label="续件" align="center" width="180" prop="addnumber">
            </el-table-column>
            <el-table-column label="运费" align="center" width="180" prop="addtmoney">
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button type="primary" size="mini" @click.native="handleForm(scope.$index,scope.row)">编辑
                    </el-button>
                    <el-button type="danger" size="mini" @click.native="handleDel(scope.row.freightid)">删除</el-button>
                </template>
            </el-table-column>

        </el-table>

        <div class="left-container">
            <el-button type="danger" size="small" @click="delGroup()">删除已选</el-button>
            <transition name="el-fade-in-linear">
                <el-button size="small" @click="toggleSelection()" v-show="cancelToggle">取消选择</el-button>
            </transition>
        </div>
        <el-pagination
            class="pagination-container"
            background
            :page-size="query.pageSize"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            layout="total,sizes,prev, pager, next, jumper"
            :page-sizes="[10, 20, 30, 50]"
            :total="totalNumber"
        ></el-pagination>
        <!--add表单--编辑-->
        <el-dialog
            :title="formMap[formName]"
            :visible.sync="formVisible"
            :before-close="hideForm"
            width="800px"
            top="5vh"
            v-dialogDrag
        >
            <el-form :model="formData" :rules="formRules" ref="dataForm">

                <el-form-item label="模板名称" prop="templatename" align="center" style="width:60%;display: inline-block;">
                    <el-input v-model="formData.templatename" placeholder="请输入模板名称" clearable>
                    </el-input>

                </el-form-item>

                <el-form-item label="仓库地址" prop="warehouseid">
                    <el-select v-model="formData.warehouseid" label="仓库地址" placeholder="请选择仓库地址"
                               clearable>
                        <el-option
                            v-for="item in buswarehouselist"

                            :key="item.warehouseid"
                            :label="item.warehousename"
                            :value="item.warehouseid">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="默认运费" prop="defaultnumber">
                    <el-input style="width:30%;display: inline-block;" v-model="formData.defaultnumber"
                              placeholder="请输入数量" clearable></el-input>
                    <label>  件内</label>
                    <el-input style="width:30%;display: inline-block;" v-model="formData.defaultmoney"
                              placeholder="请输入默认费用" clearable></el-input>
                    <label>  元</label>
                </el-form-item>
                <el-form-item label="" prop="addnumber" >
                    <label>每增加一件</label>
                    <el-input style="width:30%;display: inline-block;" v-model="formData.addnumber"
                              placeholder="请输入数量" clearable></el-input>
                    <label>件   ，</label>
                    <label>运费增加</label>
                    <el-input style="width:30%;display: inline-block;" v-model="formData.addtmoney"
                              placeholder="请输入费用" clearable></el-input>

                    <label>  元</label>
                </el-form-item>
                <el-form-item label="限定区域" prop="warehousearea">
                  <el-button @click.native="aeraselect()">限定区域模板设置</el-button>

                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click.native="formSubmit()" :loading="formLoading">保存</el-button>
                <el-button @click.native="hideForm">返回</el-button>
            </div>
        </el-dialog>

        <cityAreaDialog ref="cityAreaDialog" :areaData="areaData" v-model="defaultCityIdList" ></cityAreaDialog>
    </div>
</template>

<script>
    import {
        getList,
        addbusfreight,
        delbusfreight,
        getBusWarehouselist,
        getBusExpresslist,
        editbusfreight,
        getRegionList,
        getWarehouseCompany
    } from "../../api/freightsetting/freightsetting";
    import Tinymce from "../../components/Tinymce/index.vue";
    import cityAreaDialog from "../../components/aera/cityAreaDialog.vue"
    import { AreaCascader } from "vue-area-linkage"
    import { pca, pcaa } from 'area-data';

    const formJson = {

        freightid: "",
        templatename: "",// 模板名称
        currentPage: 1,
        pageSize: 10,
        warehouseid:"",//仓库
        expressid:"",//快递
        defaultnumber:"",
        defaultmoney:"",
        addnumber:"",
        addtmoney:"",
        warehousearea:"",
        scopeoftransport:0,
        cityids:""
    };
    export default {
        data() {

            return {
                pca: pca,
                pcaa: pcaa,
                cancelToggle: false,
                createTime: [],
                query: {
                    searchText: "",
                    currentPage: 1,
                    pageSize: 10
                },
                warehouseid:"",//仓库
                expressid:"",//快递
                list: [],//运费列表
                busexpresslist: [],//快递
                buswarehouselist: [],//仓库
                searchText: "",
                totalNumber: 0,
                loading: true,
                index: null,
                formName: null,
                formMap: {
                    add: "添加",
                    edit: "编辑"
                },
                areaData:[],//区域数据
                defaultCityIdList:[],
                aeraVisible:false,
                formLoading: false,
                formVisible: false,
                formLook: false,
                formedit:false,
                formData: formJson,
                formRules: {

                    templatename: {
                        required: true,
                        message: "请输入模板名称",
                        trigger: "blur"
                    },

                    defaultnumber: {
                        required: true,
                        message: "请输入默认数量",
                        trigger: "blur"
                    },
                  defaultmoney: {
                  required: true,
                    message: "请输入默认费用",
                    trigger: "blur"
                 },
                  addnumber: {
                        required: true,
                        message: "请输入增加数量",
                        trigger: "blur"
                    },
                  addtmoney: {
                        required: true,
                        message: "请输入增加费用",
                        trigger: "blur"
                    },



                    expressid: {
                        required: true,
                        message: "请选择快递",
                        trigger: "blur"
                    },
                    warehouseid: {
                        required: true,
                        message: "请选择仓库",
                        trigger: "blur"
                    }


                },
                multipleSelection: [] //多选集合
            };
        },
        components: {
            Tinymce,
            cityAreaDialog
        },
        methods: {
            //区域
            aeraselect(){
               // this.aeraVisible=true;
                this.$refs.cityAreaDialog.showDialog();
            },

            //是否是数字
        isNumber(val) {
        var regPos = /^\d+(\.\d+)?$/; //非负浮点数
        var regNeg = /^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/; //负浮点数
        if(regPos.test(val) || regNeg.test(val)) {
            return true;
        } else {
            return false;
        }
      },

            toggleSelection(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row);
                    });
                } else {
                    this.$refs.multipleTable.clearSelection();
                }
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
                if (val == "") {
                    this.cancelToggle = false;
                    return;
                }
                this.cancelToggle = true;
            },
            delGroup() {
                var ids = this.multipleSelection.map(item => item.freightid).join(); //获取所有选中行的id组成的字符串，以逗号分隔
                if (ids == "") {
                    this.$message({
                        message: "请先选择",
                        type: "warning"
                    });
                    return;
                }
                this.handleDel(ids);
            },
            onRest() {
                this.$router.push({
                    path: ""
                });
                this.query = {

                    currentPage: 1,
                    pageSize: 10
                };
                this.createTime = [];
                this.getList();
            },
            onSubmit() {
                this.$router.push({
                    path: "",
                    //query: this.query
                });
                this.getList();
            },
            handleCurrentChange(val) {
                this.query.currentPage = val;
                //scrollTo(0, 800);
                this.getList();
            },
            handleSizeChange(val) {
                this.query.pageSize = val;
                this.getList();
            },
            getList() {
                this.loading = true;

                console.info(this.query);
               // alert(JSON.stringify(this.query))
                getList(this.query)
                    .then(response => {
                        if (response.code) {
                            this.$message.error(response.message);
                        }
                        this.list = response.data.list || [];
                        this.totalNumber = response.data.totalNumber || 0;

                        setTimeout(() => {
                            this.loading = false;
                        }, 0.3 * 1000);
                    })
                    .catch(() => {
                        this.loading = false;
                        this.list = [];
                        this.totalNumber = 0;
                    });
            },
           //获得物流公司
            getCompany() {
                this.loading = true;
                console.info(this.query);
                // alert(JSON.stringify(this.query))
                getWarehouseCompany("")
                    .then(response => {
                        if (response.code) {
                            this.$message.error(response.message);
                            this.loading = false;
                        }
                        this.busexpresslist = response.data.list || [];

                        setTimeout(() => {
                            this.loading = false;
                        }, 0.3 * 1000);
                    })
                    .catch(() => {
                        this.loading = false;
                        this.list = [];
                        this.totalNumber = 0;
                    });
            },


            // 隐藏表单
            hideForm() {
                // 更改值
                this.formVisible = !this.formVisible;
                // 清空表单
                this.$refs["dataForm"].resetFields();
                //this.$refs.tinymce.clearContent();
                return true;
            },
            // 隐藏表单
            hideFormaera() {
                // 更改值
                this.aeraVisible = !this.aeraVisible;
                // 清空表单
                this.$refs["dataForm"].resetFields();
                return true;
            },


            // 显示表单
            handleForm(index, row) {
                console.log(row)
                this.formVisible = true;
                this.formData = Object.assign({}, formJson);
                if (row !== null) {
                    this.formData = Object.assign({}, row);
            /*        if(row.cityids!=null){
                        let city=row.cityids.split(",")
                        this.defaultCityIdList=city;
                    }*/
                }
                this.formName = "add";
                //编辑
                if (index !== null) {
                    this.index = index;
                    this.formName = "edit";
                    this.formData.warehouseid=row.warehouseid;
                    this.formData.expressid=row.expressid;
                    this.formedit=true;
                }else{
                    this.formedit=false;
                }
                // 清空验证信息表单
                if (this.$refs["dataForm"]) {
                    this.$refs["dataForm"].clearValidate();
                }
            },
            hideLook() {
                // 更改值
                this.formLook = !this.formLook;
                // 清空表单
                this.$refs["dataForm"].resetFields();

                return true;
            },

            formSubmit() {

                this.$refs["dataForm"].validate(valid => {
                    if (valid) {
                        this.formLoading = true;
                        this.formData.cityids=this.defaultCityIdList.join(",")

                        if(this.formData.cityids==""||this.formData.cityids==undefined){
                            this.formData.scopeoftransport=0;
                        }else{
                            this.formData.scopeoftransport=1;
                        }
                        console.info(this.defaultCityIdList+"=="+this.formData.cityids);

                        let data = new URLSearchParams(this.formData);
                        console.info(this.formData);
                        if(this.formedit){
                            editbusfreight(data).then(response => {
                                this.formLoading = false;
                                if (response.code) {
                                    this.$message.error(response.message);
                                    return false;
                                }
                                this.$message.success("操作成功");
                                this.formData={}
                                // 刷新表单
                                this.$refs["dataForm"].resetFields();
                                //this.$refs.tinymce.clearContent();
                                this.formVisible = false;
                                this.searchText = "";
                                this.getList();
                            });
                        }else {
                            addbusfreight(data).then(response => {
                                this.formLoading = false;
                                if (response.code) {
                                    this.$message.error(response.message);
                                    return false;
                                }
                                this.$message.success("操作成功");
                                this.formData={}
                                // 刷新表单
                                this.$refs["dataForm"].resetFields();
                                //this.$refs.tinymce.clearContent();
                                this.formVisible = false;
                                this.searchText = "";

                                this.getList();
                            });
                        }

                    }
                });
            },
            // 删除
            handleDel(ids) {
                if (ids) {
                    this.$confirm("确认要删除吗?", "提示", {
                        type: "warning"
                    })
                        .then(() => {
                            this.loading = true;
                            var params = new URLSearchParams();
                            params.append("ids", ids);
                            delbusfreight(params)
                                .then(response => {
                                    this.loading = false;
                                    if (response.code) {
                                        this.$message.error(response.message);
                                        return false;
                                    }
                                    this.$message.success("删除成功");
                                    // 刷新数据
                                    //this.list.splice(index, 1);
                                    this.getList();
                                })
                                .catch(() => {
                                    this.loading = false;
                                });
                        })
                        .catch(() => {
                        });
                }
            },
           //获得仓库
            getBusWarehouse() {

                getBusWarehouselist("")
                    .then(response => {
                        if (response.code) {
                            this.$message.error(response.message);
                        }

                        this.buswarehouselist=response.data;//仓库

                        setTimeout(() => {
                            this.loading = false;
                        }, 0.3 * 1000);
                    })
                    .catch(() => {
                        this.loading = false;
                        this.list = [];
                        this.totalNumber = 0;
                    });

            },
            //获得快递
            getBusExpress() {

                getBusExpresslist("")
                    .then(response => {
                        if (response.code) {
                            this.$message.error(response.message);
                        }

                        this.busexpresslist = response.data;//快递

                        setTimeout(() => {
                            this.loading = false;
                        }, 0.3 * 1000);
                    })
                    .catch(() => {
                        this.loading = false;
                        this.list = [];
                        this.totalNumber = 0;
                    });
            },
            //获得区域
            getRegion() {

                getRegionList("")
                    .then(response => {
                        if (response.code) {
                            this.$message.error(response.message);
                        }

                        this.areaData = response.data;//快递

                        setTimeout(() => {
                            this.loading = false;
                        }, 0.3 * 1000);
                    })
                    .catch(() => {
                        this.loading = false;
                        this.list = [];
                        this.totalNumber = 0;
                    });
            }


        },
        filters: {
            typeFilterType(status) {
                const statusMap = {
                    1: "warning"
                };
                return statusMap[status];
            },
            typeFilterName(status) {
                const statusMap = {
                    0: "常见",
                    1: "其他"
                };
                return statusMap[status];
            }
        },


        mounted() {
        },
        created() {
            // 将参数拷贝进查询对象
            let query = this.$route.query;
            this.query = Object.assign(this.query, query);
            this.query.pageSize = parseInt(this.query.pageSize);
            // 加载表格数据
            this.getList();
            this.getBusWarehouse();
            this.getBusExpress();
            this.getRegion();

        }
    };
</script>

<style type="text/scss" lang="scss">
    body {
        margin: 0;
    }
</style>

